<template>
	<view class="index">
		<view class="item-wrapper">
			<view class="title-wrapper">
				<view class="title">
					昵称
				</view>
				<view class="value">
					{{ form.customerPetName || '' }}
				</view>
				<uni-icons type="right" color="#fff" size="16"></uni-icons>
			</view>
		</view>
		<view class="item-wrapper">
			<view class="title-wrapper" @click="callPhone">
				<view class="title">
					手机号码
				</view>
				<view class="value">
					{{ form.mobilePhone || '' }}
				</view>
				<uni-icons type="right" color="#ffffff" size="16"></uni-icons>
			</view>
		</view>
		<view class="item-wrapper">
			<view class="title-wrapper">
				<view class="title">
					收货地址
				</view>
			</view>
			<view class="form-wrapper">
				<view class="form-item">
					<view class="form-label">
						店名：
					</view>
					<view class="form-value">
						{{ form.tradeName || '' }}
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">
						收货人：
					</view>
					<view class="form-value">
						{{ form.receiver || '' }}
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">
						联系电话：
					</view>
					<view class="form-value">
						{{ form.receiverPhone || '' }}
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">
						收货地址：
					</view>
					<view class="form-value">
						{{ form.receiverAddress || '' }}
					</view>
				</view>
			</view>
		</view>
		<view class="item-wrapper" v-if="!form.isBlacklist">
			<view class="title-wrapper" @click="openTags">
				<view class="title">
					标签
				</view>
				<view class="value">
					{{ form.labelName || '去设置' }}
				</view>
				<uni-icons type="right" color="#898989" size="16"></uni-icons>
			</view>
		</view>
		<view class="item-wrapper" v-else>
			<view class="title-wrapper">
				<view class="title">
					该客户已被纳入黑名单
				</view>
				<view class="value">

				</view>
				<uni-icons type="right" color="#ffffff" size="16"></uni-icons>
			</view>
			<view class="form-wrapper">
				<view class="form-item">
					<view class="form-label">
						拉黑原因：
					</view>
					<view class="form-value">
						{{ form.blacklistReason || '' }}
					</view>
				</view>
				<view class="form-item">
					<view class="form-label">
						拉黑时间：
					</view>
					<view class="form-value">
						{{ form.blacklistTime || '' }}
					</view>
				</view>
			</view>
		</view>

		<view v-if="!form.isBlacklist" class="btn-wrapper" @click="blacklist">
			纳入黑名单
		</view>
		<view v-else class="btn-wrapper" @click="cancelBlacklist">
			移出黑名单
		</view>

		<uni-popup ref="popup">
			<view class="blacklist-wrapper">
				<view class="popup-title-wrapper">
					<text class="title">纳入黑名单</text>
				</view>
				<view class="popup-content-wrapper">
					<textarea class="textarea" focus v-model="reason" placeholder="请输入纳入黑名单原因"
						maxlength="50"></textarea>
				</view>
				<view class="popup-btn-wrapper">
					<view class="btn" @click="closeBlacklist">
						取消
					</view>
					<view class="btn primary" @click="confirmBlacklist">
						纳入黑名单
					</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="popupSelect">
			<view class="popup-wrapper">
				<view class="title-wrapper">
					<uni-icons type="closeempty" @click="close" size="24" color="#454545" class="icon"></uni-icons>
					<text>修改标签</text>
					<view class="btn" @click="save">
						保存
					</view>
				</view>
				<view class="content-wrapper">
					<view class="item" @click="select(item.id,item.labelName)"
						:class="{'current':selectIds.includes(item.id)}" v-for="(item,index) in tagList" :key="index">
						<text>{{ item.labelName }}</text>
						<!-- <image v-if="selectIds.includes(item.id)" src="../../assets/images/checked-icon.png"
							class="icon" mode=""></image> -->
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {},
				selectIds: [],
				selectNames: [],
				reason: ''
			}
		},
		onLoad(option) {
			this.getInfo(option.id)
		},
		computed: {
			tagList() {
				return this.$store.state.tagList
			}
		},
		methods: {
			async getInfo(id) {
				const data = await this.$api.get('/app/pickuppoint/customer/getInfo', {
					id: id
				})
				if (data.code === 200) {
					this.form = data.data;
				}
			},
			openTags() {
				if (this.form.labelId) {
					this.selectIds = this.form.labelId.split(',')
					this.selectNames = this.form.labelName.split(',')
				}
				this.$refs.popupSelect.open('bottom');
			},
			select(id, labelName) {
				if (this.selectIds.includes(id)) {
					this.selectIds = this.selectIds.filter(item => {
						return item !== id;
					})
					this.selectNames = this.selectNames.filter(item => {
						return item !== labelName;
					})
				} else {
					this.selectIds.push(id)
					this.selectNames.push(labelName)
				}
			},
			close() {
				this.$refs.popupSelect.close();
			},
			async save() {
				// if (!this.selectIds.length) {
				// 	uni.showToast({
				// 		title: '至少要选择一个标签',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				const data = await this.$api.put('/app/pickuppoint/customer', {
					id: this.form.id,
					labelId: this.selectIds.join(','),
					labelName: this.selectNames.join(','),
				})
				if (data.code === 200) {
					uni.showToast({
						title: '修改成功',
						icon: "success"
					})
					this.close();
					this.getInfo(this.form.id);
					this.refesh()
				}
			},
			blacklist() {
				this.reason = '';
				this.$refs.popup.open('center')
			},
			closeBlacklist() {
				this.$refs.popup.close()
			},
			async confirmBlacklist() {
				if (!this.reason) {
					uni.showToast({
						title: '请输入原因',
						icon: 'error'
					})
					return
				}
				const data = await this.$api.post('/app/pickuppoint/customer/addToBlacklist', {
					id: this.form.id,
					blacklistReason: this.reason
				})
				if (data.code === 200) {
					uni.showToast({
						title: '操作成功',
						icon: "success"
					})
					this.closeBlacklist();
					this.getInfo(this.form.id);
					this.refesh()
				}
			},
			async cancelBlacklist() {
				uni.showModal({
					title: '移出黑名单',
					content: '是否将该客户移出黑名单？',
					success: async (e) => {
						if (e.confirm) {
							const data = await this.$api.post(
								'/app/pickuppoint/customer/cancelBlacklist', {
									id: this.form.id
								})
							if (data.code === 200) {
								uni.showToast({
									title: '操作成功',
									icon: "success"
								})
								this.getInfo(this.form.id);
								this.refesh()
							}
						}
					}
				})
			},
			refesh() {
				var pages = getCurrentPages();
				pages[pages.length - 2].$vm.refresh()
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.form.mobilePhone
				});
			}
		},
		components: {

		}
	}
</script>

<style lang="scss" scoped>
	.index {
		height: 100%;
		overflow: auto;

		.item-wrapper {
			background-color: #ffffff;
			margin: 10upx 0upx 0 0upx;
			padding: 25upx;

			.user-info {
				.info {
					&:last-child {
						margin-top: 20upx;
					}
				}
			}


			.title-wrapper {
				display: flex;
				align-items: center;

				.icon {
					margin-right: 5upx;
				}

				.title {
					height: 34upx;
					line-height: 34upx;
					font-size: 34upx;
					color: #222222;
					padding-left: 10upx;
					border-left: 8upx solid #F26022;
				}

				.value {
					flex: 1;
					text-align: right;
					font-size: 32upx;
					color: #666666;
				}

				.input {
					flex: 1;
					text-align: right;
					font-size: 32upx;
					color: #666666;
					margin-right: 10upx;
				}
			}



			.form-wrapper {
				padding: 0 20upx;

				.form-item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28upx;
					margin-top: 30upx;

					.form-label {
						color: #232323;
					}

					.form-value {
						color: #666666;
						flex: 1;
						text-align: right;
					}
				}
			}
		}

		.btn-wrapper {
			height: 90upx;
			background-color: #ffffff;
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32upx;
			color: #222222;
		}

		.blacklist-wrapper {
			background-color: #ffffff;
			width: 600upx;
			height: 360upx;
			border-radius: 20upx;
			overflow: hidden;
			position: relative;

			.popup-title-wrapper {
				text-align: center;
				position: relative;
				margin: 30upx 0;

				.title {
					font-size: 36upx;
				}

				.close {
					position: absolute;
					right: 30upx;
				}
			}

			.popup-content-wrapper {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 20upx 0;

				.textarea {
					width: 520upx;
					height: 140upx;
					box-sizing: border-box;
					border: 1upx solid #cecece;
					padding: 20upx;
					border-radius: 10upx;
				}
			}

			.popup-btn-wrapper {
				position: absolute;
				bottom: 0;
				height: 100upx;
				width: 100%;
				display: flex;
				align-items: center;
				border-top: 1upx solid #efefef;

				.btn {
					height: 100upx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #212121;
					flex: 1;
					font-size: 32upx;

					&:first-child {
						border-right: 1upx solid #efefef;
					}

					&.primary {
						color: #F26022;
					}
				}
			}
		}

		.popup-wrapper {
			background-color: #ffffff;
			border-radius: 20upx 20upx 0 0;
			min-height: 600upx;

			.title-wrapper {
				height: 98upx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				font-size: 36upx;

				.icon {
					position: absolute;
					left: 32upx;
					font-weight: bold;
				}

				.btn {
					color: #F26022;
					font-size: 32upx;
					position: absolute;
					right: 32upx;
				}
			}

			.content-wrapper {
				display: flex;
				flex-wrap: wrap;
				padding: 32upx;

				.item {
					position: relative;
					padding: 12upx 40upx;
					border-radius: 4upx;
					background-color: #f9f9f9;
					color: #343434;
					border: 2upx solid #cecece;
					margin-right: 30upx;
					margin-bottom: 30upx;

					&.current {
						background-color: #F2602222;
						color: #F26022;
						border: 2upx solid #F26022;
					}

					.icon {
						width: 28upx;
						height: 24upx;
						position: absolute;
						bottom: -1upx;
						right: -1upx;
					}
				}
			}
		}
	}
</style>